<template>
  <div class="box">
    <label for="">
      测试
    </label>
    <!-- <input
      :type="type"
      :xx="value"
      @input="$emit('change', $event.target.value)"
      :placeholder="placeholder"
      @focus="$emit('focus')"
      @blur="$emit('blur')"
    /> -->

    <!-- 使用v-bind绑定所有传过来的属性，$attrs是一个数组，有所有传过来的属性 -->
    <!-- <input
      v-bind="$attrs"
      @input="$emit('change', $event.target.value)"
      @focus="$emit('focus')"
      @blur="$emit('blur')"
    /> -->

    <!--使用v-on="$listeners"绑定所有传递过来的事件  -->
    <input v-bind="$attrs" v-on="$listeners" />
  </div>
</template>

<script>
export default {
  // 禁用特性继承
  inheritAttrs: false,

  // model: {
  //   event: 'change',
  //   prop: 'xx'
  // },
  props: {
    value: {
      type: [Number, String]
    },
    type: {
      type: String,
      validator (v) {
        return ['text', 'password'].includes(v)
      }
    },
    placeholder: {
      type: String,
      default: '默认占位符'
    }
  },
  methods: {
    input (e) {
      this.$emit('input', e.target.value)
    }
  },
  // 这里只能用created钩子，如果用muoted钩子还没确认输入的时候会报错
  created () {
    this.$listeners.input = this.$listeners.input ? this.input : ''
  }
}
</script>

<style></style>
